<template>
	<view class="bg-white" >
		<cu-custom bgColor="bg-gradual-orange" :isBack="true" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">设备档案</block>
			<block slot="right">
				<view @tap="showModa2" data-target="DialogModal2">排序</view>
			</block>
		</cu-custom>

		<view class="container">
<!-- 			<view class="solid-bottom">
				<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input type="text" v-model="deviceId" placeholder="输入设备名称" confirm-type="search" @input="goStatistics()"></input>
					</view>
					<button class="cu-btn shadow-blur round" style="width: 5rem; background-color: #f0b863;color: #ffffff;margin-right: 0.3rem;" @tap="goStatistics()">查询</button>
					<button class="cu-btn shadow-blur round" style="width: 5rem; background-color: #f27050;color: #ffffff;margin-right: 0.3rem;" @tap="reset()">重置</button>
				</view>
			</view> -->
			 <mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top"  @down="downCallback"  @up="upCallback">
				<!-- 数据列表 -->
				<view class="al-list cu-list">
					<view class="message_text bg-white cu-item flex justify-around align-center solid-bottom margin-bottom-sm margin-top-sm" style="width: 100vw;" v-for="(item,index) in msgList" :key="index" @tap="goAnnotationDetail(item)" :class="modalName=='move-box-'+ index?'move-cur':''"
					  @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
						<view class="titlePad content" style="height: 6rem;">
							<view class="flex justify-start text-cut text-lg" style="width:26em;color: #333;font-family: '黑体';">
									<text style="margin-left: 1rem;">{{item.deviceId}}</text>

							</view>
							<view class="flex justify-between margin-top-xs" style="font-family: '黑体';color: #333;margin-top: 0.5rem;">
								<view style="padding-left: .8rem;">
									<text v-if="item.onlineState== 0" style="color: #ed4014;">&nbsp;离线</text>
									<text v-if="item.onlineState== 1" style="color: #19be6b;">&nbsp;在线</text>
								</view>
							</view>

							<view class="flex justify-between margin-top-xs" style="font-family: '黑体';color: #333;margin-top: 0.5rem;">
								<view style="padding-left: .8rem;">
									<text >设备名称:&nbsp;{{item.userName}}</text>
								</view>
							</view>
							<view class="flex justify-between margin-top-xs" style="font-family: '黑体';color: #333;margin-top: 0.5rem;">
								<view style="padding-left: .8rem;">
									<text >位置:&nbsp;{{item.deviceAddress}}</text>
								</view>
							</view>
						</view>
						<view class="action text-sm" style="color: #333;margin-top: -3em;margin-left: -13em;width: 10em;">
							<text >{{formatDate(item.turnoverTime,20)}}</text>
							<text v-if="item.deviceStatus=='1'" style="font-size: 1.2em; color: #19be6b;">&nbsp;在线</text>
							<text v-if="item.deviceStatus=='0'" style="font-size: 1.2em; color: #ed4014;">&nbsp;离线</text>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>


		<view class="cu-modal" :class="modalName2=='DialogModal2'?'show':''">
			<view class="cu-dialog"  style="height: 15rem;">
				<view class="cu-bar bg-white justify-end">
					<view class="content">设备编号</view>
					<view class="action" @tap="hideModa2">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group" style="width: 100%;height: 100%;">
						<view style="width: 40%; ">
							<view class="title" style="margin-top:1rem;">设备编号:</view>
							<view class="title" style="margin-top:1rem;">设备名称:</view>
							<view class="title" style="margin-top:1rem;">位置:</view>

						</view>
						<view style="width: 50%; ">
							<radio-group name="type" v-model="selectionSort" @change="radioChange2">
								<label>
									<radio style="margin-right:0.2rem ; margin-top:1rem;transform:scale(0.7)" value="deviceId desc"
										:checked=true />
									<text>正序</text>
								</label>

								<label>
									<radio style="margin-right:0.2rem ; margin-top:1rem; transform:scale(0.7)" value="deviceId" />
									<text>倒序</text>
								</label>
								
								<label>
									<radio style="margin-right:0.2rem ; margin-top:1rem;transform:scale(0.7)" value="deviceName desc"/>
									<text>正序</text>
								</label>
								
								<label>
									<radio style="margin-right:0.2rem ; margin-top:1rem; transform:scale(0.7)" value="deviceName" />
									<text>倒序</text>
								</label>
								
								<label>
									<radio style="margin-right:0.2rem ; margin-top:1rem;transform:scale(0.7)" value="deviceAddress desc"/>
									<text>正序</text>
								</label>
								
								<label>
									<radio style="margin-right:0.2rem ; margin-top:1rem; transform:scale(0.7)" value="deviceAddress" />
									<text>倒序</text>
								</label>

							</radio-group>
						</view>

					</view>
				</view>
			</view>

		</view>
		
	</view>
</template>

<script>
	const tabs = [{title:'',value:0}];
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";


	export default {
	    mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs,
				TabCur: 0,
				scrollLeft: 0,
				NavBarColor:this.NavBarColor,
				upOption:{
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示

					},
					loading:'',
					text:'全部',
					isShowNoMore:false,
					textNoMore:'我是有底线的 >_<'
				},
				msgList: [], //列表数据
			    read: "all",
				announcement1:[],
				msg1Count:"",
				msg1Title:"",
				announcement2:[],
				msg2Count:"",
				msg2Title:"",
				url:"/three/meterDevice",
				listTouchStart: 0,
			    modalName: null,
			    listTouchDirection: null,
				deviceId:'',
				modalName2: null,
				selectionSort:'deviceId desc',
			}
		},
		onShow() {
			if(this.mescroll){
				this.mescroll.resetUpScroll()
			}
		},
		computed:{
			top() {
				return 1 * 2 + 180
			},
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
		},
		methods: {
			
			radioChange2: function(evt) {
				this.selectionSort = evt.detail.value
				this.modalName2 = null
				
				this.mescroll.resetUpScroll()
			
			},
			
			// 弹出
			showModa2(e) {
				this.modalName2 = e.currentTarget.dataset.target
			},
			//取消
			hideModa2(e) {
				this.modalName2 = null
			},
			
			upCallback(page) {
				//联网加载数据
				console.log("tabindex",this.TabCur )
					this.$http.get(this.url,{params:{pageNo: page.num, pageSize:page.size,
					deviceId:this.deviceId,
					selectionSort:this.selectionSort,
					}}).then(res=>{
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;

						this.announcement1 = res.data.result.records
						this.mescroll.endSuccess(this.announcement1.length);
						//console.log("url", res)
						//设置列表数据
						  if (res.data.success) {
							 console.log("res",res.data)
							 this.msg1Count = res.data.result.total
							 this.msg1Title = "通知公告";
							 this.msgList = []; //如果是第一页需手动制空列表

							 for(let annItem of this.announcement1){
									 this.msgList.push(annItem)
								}
						 }

					}).catch(()=>{
						//联网失败, 结束加载
						this.mescroll.endErr();
					})

			},
			goAnnotationDetail(item){
				//item.readFlag = '1'
				this.mescroll.resetUpScroll()
				console.log('******',item)
			    if(item.openType=="component" && item.openPage.indexOf('email')>= 0){
					this.goEmailDetailPage(item)
				}else{
					// console.log("detail",encodeURIComponent(JSON.stringify(item)))
					uni.navigateTo({
						url: '/pages/cathode/flowmeterData?item='+ encodeURIComponent(JSON.stringify(item))
					});
				}
			},
			goAdd(){
				this.mescroll.resetUpScroll()
				uni.navigateTo({
						url: '/pages/common/reimbursementAdd'
				});
			},
			goStatistics(){
				if(this.mescroll){
					this.mescroll.resetUpScroll()
				}
			},
			reset(){
				this.deviceId=""
			},
			isEmail(item){
				if(item.openType=="component" &&item.openPage.indexOf('email')>=0){
				  return true;
				}else{
				  return false;
				}
		    },
			goEmailDetailPage(item){
				console.log("go",item.anntId)
				console.log("item",item)
				 if(item.readFlag == '0'){
					//item.readFlag = '1'
					this.mescroll.resetUpScroll()
					let readUrl = '/sys/sysAnnouncementSend/editByAnntIdAndUserId';
					this.$http.put(readUrl,{anntId:item.anntId})
				}
				// console.log("goe",item.busId)

				uni.navigateTo({
					url: '/pages/mail/mailDetail?id='+item.busId
				});

			},
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},　
			deleteAnnotation(item) {
				this.$http.delete(this.delUrl+'?id='+item.id).then(res => {
					console.log("结果数据9", res)
					if (res.data.success) {
						this.mescroll.resetUpScroll()
					}
				}).catch(e => {
					console.log("al delUrl请求错误2", e)
					this.mescroll.endErr();
				})
			},
			formatDate(text,len){
				if(!text || text.length==0){
					return ''
				}
				if(text.length<len){
					return text;
				}
				return text.substr(0,len)
			},
			titleFilter(text,len){
				if(!text || text.length==0){
					return ''
				}
				if(text.length<len){
					return text;
				}
				return text.substr(0,len)+"..."
			}

		}
	}
</script>

<style scoped>
	.e-btn{margin-bottom: 1rem;}

	.titlePad{margin-top:0.6rem;}
	.cu-list>.move-cur{
		transform: translateX(-150rpx);

	}
	.nav .cu-item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}

</style>
